<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swiper轮播图</title>
    <!-- jq -->
    <script src="../public/jQuery.min.js"></script>
    <!-- jq -->
    <!-- 轮播图 -->
    <link rel="stylesheet" href="../public/swiper-bundle.min.css">
    <script src="../public/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="../css/index/index.scss">
    <!-- 轮播图 -->
    <style>
        /* 自定义轮播图容器的样式 */
        .swiper-container {
            overflow: hidden;
            width: 100%;
            height: 600px;

            /* 设置轮播图的高度 */
            .img {
                position: relative;
                width: 100%;
                height: 600px;

                & img {
                    width: 100%;
                    height: 100%;
                    max-width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }

            .pages {
                position: absolute;
                bottom: 36%;
            }

            .leftbut1,
            .rightbut1 {
                position: absolute;
                top: 30%;
                right: 0;
            }
        }

        @media screen and (max-width:768px) {
            .swiper-container {
                overflow: hidden;
                width: 100%;
                height: 200px;

                /* 设置轮播图的高度 */
                .img {
                    position: relative;

                    & img {
                        width: 100%;
                        height: 100%;
                        max-height: 100%;
                        object-fit: cover;
                    }
                }

                .pages {
                    position: absolute;
                    bottom: 77%;
                }

                .leftbut1,
                .rightbut1 {
                    position: absolute;
                    top: 12%;
                    right: 0;
                }
            }
        }

    </style>
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 每个轮播项的内容 -->
            <div class="swiper-slide">
                <div class="img">
                    <img src="./img/pclogin/baidu.png" alt="图片1">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="img">
                    <img src="./img/pcindex/bgimg.png" alt="图片1">
                </div>
            </div>
            <div class="swiper-slide">
                <div class="img">
                    <img src="./img/equip/shop1.png" alt="图片1">
                </div>
            </div>
            <!-- 添加更多轮播项 -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination pages"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-next leftbut1"></div>
        <div class="swiper-button-prev rightbut1"></div>
    </div>
    <div>123</div>

    <script>
        // 初始化Swiper
        var mySwiper = new Swiper('.swiper-container', {
            // 设置轮播的方向
            direction: 'horizontal',

            // 自动播放
            autoplay: {
                delay: 3000, // 每张幻灯片之间的间隔时间（以毫秒为单位）
            },
            loop: true,

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进/后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
        });
    </script>
</body>

</html>
